<%--
  Created by IntelliJ IDEA.
  User: David
  Date: 2019/10/8
  Time: 16:10
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>小视频页</title>

    <link href="${path}/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <link rel="stylesheet" href="${path}/css/dynamic/petvideo.css">

    <!--可无视-->
    <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <!--主要样式-->
    <style type="text/css">


    </style>

</head>
<body>

<nav class="navbar navbar" role="navigation" style="width: 100%">
    <div class="navbar-brand">
        <a class="navbar-brand" href="#">
            <img src="" alt=""></a>
    </div>
    <div class="navbar-brand">
        <form class="form-horizontal" role="form">
            <div class="form-group has-feedback">
                <div class="modal-md">
                    <span class="glyphicon glyphicon-search form-control-feedback" style="font-size:20px "></span>
                    <input type="text" class="form-control input-lg" placeholder="搜'柴犬'试试" id="search">
                </div>
            </div>
        </form>
    </div>
    <!--右边-->
    <!-- <div> -->
    <ul class="nav navbar-nav navbar-right">
        <li class="pure-menu-selected"><a href="../index.html" class="mynav-underline-active"><b>首页</b></a></li>
        <li><a href="../forum/forum.html" class="nav-underline"><b>论坛</b></a></li>
        <li><a href="../PetDynamics/dynamic.html" class="nav-underline"><b>宠物动态</b></a></li>
        <li><a href="../trading/homepage.html" class="nav-underline"><b>二手市场</b></a></li>
        <li><a href="../fun-function.html" class="nav-underline"><b>趣味专区</b></a></li>
        <li><a href="../message-centre.html" class="nav-underline"><b>消息中心</b></a></li>
        <li><a href="${path}/person/person.jsp" class="nav-underline"><b>我的</b></a></li>

    </ul>

</nav>

<div class="message">
    <form method="post" action="" enctype="multipart/form-data">
        <input type="text" id="txt" name="txt" class="input" value="选择一个视频文件" disabled="disabled">
        <input type="button" onmousemove="f.style.pixelLeft=event.x-60;f.style.pixelTop=this.offsetTop;" value="上传视频" size="30" onclick="f.click()" class="liulan">
        <button type="submit">提交</button>
        <input type="file" id="f" onchange="txt.value=this.value" name="f" style="height:26px;" class="files" size="1" hidefocus="">
    </form>
</div>

<div class="video">
    <div class="container" style="margin-top: 6px">
        <div class="videolist" vpath="v1.jpg" ipath="https://blz-videos.nosdn.127.net/1/OverWatch/OVR-S03_E03_McCree_REUNION_zhCN_1080P_mb78.mp4">
            <div class="vtit">视频一</div>
            <img src="${path}/imgs/petvideo/v1.jpg" width="540px" height="300px" />
            <div class="vtime">2018-06-22</div>
            <img src="${path}/imgs/petvideo/play.png" class="videoed">
        </div>

        <div class="videolist" vpath="v2.jpg" ipath="https://blz-videos.nosdn.127.net/1/OverWatch/AnimatedShots/Overwatch_AnimatedShot_CinematicTrailer.mp4">
            <div class="vtit">视频一</div>
            <img src="${path}/imgs/petvideo/v2.jpg" width="540px" height="300px" />
            <div class="vtime">2018-06-22</div>
            <img src="${path}/imgs/petvideo/play.png" class="videoed">
        </div>
        <div class="videolist" vpath="v1.jpg" ipath="https://blz-videos.nosdn.127.net/1/OverWatch/OVR-S03_E03_McCree_REUNION_zhCN_1080P_mb78.mp4">
            <div class="vtit">视频一</div>
            <img src="${path}/imgs/petvideo/v1.jpg" width="540px" height="300px" />
            <div class="vtime">2018-06-22</div>
            <img src="${path}/imgs/petvideo/play.png" class="videoed">
        </div>
        <div class="videolist" vpath="v2.jpg" ipath="https://blz-videos.nosdn.127.net/1/OverWatch/AnimatedShots/Overwatch_AnimatedShot_CinematicTrailer.mp4">
            <div class="vtit">视频一</div>
            <img src="${path}/imgs/petvideo/v2.jpg" width="540px" height="300px" />
            <div class="vtime">2018-06-22</div>
            <img src="${path}/imgs/petvideo/play.png" class="videoed">
        </div>
        <div class="videolist" vpath="v1.jpg" ipath="https://blz-videos.nosdn.127.net/1/OverWatch/OVR-S03_E03_McCree_REUNION_zhCN_1080P_mb78.mp4">
            <div class="vtit">视频一</div>
            <img src="${path}/imgs/petvideo/v1.jpg" width="540px" height="300px" />
            <div class="vtime">2018-06-22</div>
            <img src="${path}/imgs/petvideo/play.png" class="videoed">
        </div>
        <div class="videolist" vpath="v2.jpg" ipath="https://blz-videos.nosdn.127.net/1/OverWatch/AnimatedShots/Overwatch_AnimatedShot_CinematicTrailer.mp4">
            <div class="vtit">视频一</div>
            <img src="${path}/imgs/petvideo/v2.jpg" width="540px" height="300px" />
            <div class="vtime">2018-06-22</div>
            <img class="play" src="${path}/imgs/petvideo/play.png" class="videoed">
        </div>

        <!-- <div class="videos" style="display: block;">
            <video id="video" poster="v1.jpg" style="width: 640px" src="https://blz-videos.nosdn.127.net/1/OverWatch/OVR-S03_E03_McCree_REUNION_zhCN_1080P_mb78.mp4" preload="auto" controls="controls" autoplay="autoplay"></video>
            <img onclick="close1()" class="vclose" src="../../imgs/petvideo/gb.png" width="25" height="25">
        </div>		 -->
        <div class="videos"></div>
    </div>
</div>




<!-- bootstrap中的js插件依赖于jquery框架,所以必须先引入jquery的js文件 -->
<script src="${path}/plugins/jquery/jquery.min.js"></script>
<!--引入bootstrap的js文件-->
<script src="${path}/plugins/bootstrap/js/bootstrap.js"></script>

<script>
    $(document).ready(function () {
        $("#search").focus(function () {
            $(this).css("padding-right", "200.5px")
        });
        $("#search").blur(function () {
            $(this).css("padding-right", "42.5px")
        });
    });

</script>



<script type="text/javascript" src="${path}/js/jquery.min.js"></script>
<script type="text/javascript">
    $('.videolist').each(function(){ //遍历视频列表
        $(this).hover(function(){ //鼠标移上来后显示播放按钮
            $(this).find('.videoed').show();
        },function(){
            $(this).find('.videoed').hide();
        });
        $(this).click(function(){ //这个视频被点击后执行
            var img = $(this).attr('vpath');//获取视频预览图
            var video = $(this).attr('ipath');//获取视频路径
            $('.videos').html("<video id=\"video\" poster='"+img+"' style='width: 640px' src='"+video+"' preload=\"auto\" controls=\"controls\" autoplay=\"autoplay\"></video><img onClick=\"close1()\" class=\"vclose\" src=\"../../imgs/petvideo/gb.png\" width=\"25\" height=\"25\">");
            $('.videos').show();
        });
    });

    function close1(){
        var v = document.getElementById('video');//获取视频节点
        $('.videos').hide();//点击关闭按钮关闭暂停视频
        v.pause();
        $('.videos').html();
    }
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';color:#ffffff">
    <p>来源：<a href="" target="_blank">素材</a></p>
</div>
</body>
</html>
